<template>
  <div class="enclosure-img">
    <div class="flex flex-wrap">
      <div
        v-for="(item, index) in images"
        :key="index"
        class="small-img hand position-relative"
        :style="{ width: width, height: height }">
        <img :src="item.url" class="width-100 height-100" />
        <div
          v-if="item.date != '' && item.date != undefined"
          class="add-new text-center width-100 height-100 content-fill flex flex-vertical-center flex-wrap">
          <p>补</p>
          <p>{{ item.date }}</p>
        </div>
        <div class="list-cover flex flex-vertical-center">
          <Icon type="ios-eye-outline" :size="22" @click="preViewImgFun(index)"></Icon>
          <Icon type="ios-trash-outline" :size="22" @click="handleRemove(index)" v-if="alreayDel"></Icon>
          <Icon
            type="ios-trash-outline"
            :size="22"
            @click="handleRemove(index)"
            v-else
            v-show="images.length > 1 && showDelete"></Icon>
        </div>
      </div>
    </div>
    <dt-preview
      :images="preViewImg"
      :showDownLoad="showDownLoad"
      :showIndex="showIndex"
      ref="preViewRef"></dt-preview>
  </div>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import dt from '@dt/dt'

  const [showIndex] = [ref(0)]
  const [preViewImg] = [ref([])]
  const [preViewRef] = [ref()]
  const emits = defineEmits(['onHandleRemove'])

  const props = defineProps({
    images: {
      // 图片
      type: Array,
      default: function () {
        return []
      }
    },
    width: {
      // 小图宽
      type: String,
      default: '100px'
    },
    height: {
      // 小图宽
      type: String,
      default: '100px'
    },
    showDownLoad: {
      // 是否展示下载
      type: Boolean,
      default: true
    },
    showDelete: {
      // 是否展示删除
      type: Boolean,
      default: true
    },
    alreayDel: {
      // 是否一直可以删除
      type: Boolean,
      default: false
    },
    // 定义图片归类
    type: {
      type: String,
      default: ''
    },
    attachId: {
      type: Number,
      default: null
    }
  })

  function preViewImgFun(index) {
    preViewImg.value = props.images.map((item) => item.url)
    showIndex.value = index
    preViewRef.value.show()
  }
  /**
   * 删除图片
   */
  function handleRemove(index) {
    emits('onHandleRemove', index, props.type, props.attachId)
  }
</script>

<style lang="scss" scoped>
  .enclosure-img {
    // margin-top: 30px;
    .list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      justify-content: space-around;
    }

    .small-img:hover .list-cover {
      display: flex;
    }

    .list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }

    .small-img {
      margin: 10px 20px 0 0;
      border: 1px solid #666;

      .add-new {
        p {
          font-size: 18px;
          color: #d9001b;
          width: 100%;
        }
      }
    }
  }
</style>
